<template>
	<view class="pd30 bg-w" style="height: 100vh;">
		<view class="bg-w bdr16 box-shadow pd40 flex space alcenter">
			<view class="flex alcenter">
				<image class="money-icon" :src="''"></image>
				<view class="ml20 ft16 text-info">当前余额</view>
			</view>
			<view class="ft16 ftw600 text-default">¥5.00</view>
		</view>
		
		<view class="mt40 bg-w bdr16 box-shadow pd40 ">
			<view class="ft16 text-info">选择充值金额</view>
			<view class="flex wrap mt40">
				<view v-for="(item,index) in  moneys" :key="index" @click="select" :data-index="index" :class="selectIndex == index ? 'on' : ''" class="tag-money mr20 mb20 flex center alcenter">
					{{item.label}}
				</view>
			</view>
		</view>
		
		<view class="mt40 bg-w bdr16 box-shadow pd40">
			<view class="ft16 text-info">充值金额</view>
			<view class="flex alcenter mt30">
				<text class="ft32 ftw600">￥</text>
				<input type="text" style="height: 80rpx;" v-model="money" class="ft32 ftw600 pl10"/>
			</view>
		</view>
		
		<view class="mt40">
			<button class="btn-main text-w ftw600">确认充值</button>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				selectIndex:0,
				money:500,
				moneys:[
					{label:'500元',money:500},
					{label:'300元',money:300},
					{label:'200元',money:200},
					{label:'100元',money:100},
					{label:'50元',money:50},
					{label:'20元',money:20},
				]
			}
		},methods:{
			select(e){
				let index =parseInt(e.currentTarget.dataset.index);
				this.selectIndex = index;
				this.money =  this.moneys[index].money;
			}
		}
	}
</script>

<style>
	.money-icon{
		width: 80rpx;
		height: 80rpx;
	}
	.tag-money{
		width:180rpx;
		height:100rpx;
		background:#FFFFFF;
		border-radius:50rpx;
		border:4rpx solid #E6E6E6;
		color:#333333;
		font-size: 32rpx;
		font-weight: 600;
	}
	.tag-money.on{
		border:none;
		background: #FF6D00;
		color:#FFFFFF;
	}
</style>